<template>
    <view>
        <view class="record" v-for="(item, index) in list" :key="index">
            <view class="record-name">
                <view class="record-name-left">
                    <u-avatar class="avatar" size="40" :src="'/static/img/dd.png'"></u-avatar>
                    <text>{{ item.customerName }}</text>
                </view>
                <view class="record-name-right">
                    <text class="record-name-right-icon"></text>
                    <text>{{ bus_customer_status[item.customerStatus] }}</text>
                </view>
            </view>
            <view class="record-describe">{{ item.followupContent }}</view>
            <view class="record-time">
                <text>最后跟进时间：{{ item.followupTime }}</text>
            </view>
        </view>
        <u-loadmore :status="status" />
    </view>
</template>

<script>
import { convertToDict } from '@/common/utils'
export default {
    props: {
        id: {
            type: String
        }
    },
    data() {
        return {
            list: [],
            scrollTop: 0,
            old: {
                scrollTop: 0
            },
            status: 'loading',
            queryData:{
                customerId: null,
                pageNum: 1,
                pageSize: 10
            },
            total: 0,
            bus_customer_status: {}
        }
    },
    created() {
        this.queryData.customerId = this.id
        this.getData()
        this.bus_customer_status = convertToDict(JSON.parse(uni.getStorageSync('bus_customer_status')));
    },
    methods: {
        getData() {
            this.status = 'loading'
            this.$http.get('/app/followup_record/recordList', this.queryData).then(res => {
				if (res.code == 200) {
                    this.list = [...this.list, ...res.rows]
                    this.total = res.total
                    if(this.total == this.list.length) {
                        this.status = 'nomore'
                    }
				} else {
					uni.$u.toast(res.msg)
                    this.status = 'nomore'
				}
			}).catch(err => {
                console.log(err)
                this.status = 'nomore'
			})
        },
        loadmore() {
            if(this.total > this.list.length){
                this.queryData.pageNum ++
                this.getData()
            }
        }
    },
}
</script>

<style lang="scss" scoped>
.record {
    border-radius: 24rpx;
    background: rgba(255, 255, 255, 1);
    margin-bottom: 32rpx;
    padding: 32rpx;

    .record-state {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 28rpx;
        font-weight: 500;
        margin-bottom: 28rpx;

        >view:nth-child(1) {
            color: rgba(103, 117, 133, 1);
        }

        >view:nth-child(2) {
            color: rgba(12, 16, 25, 1);
        }
    }

    .record-name {
        display: flex;
        margin-bottom: 28rpx;

        .record-name-left {
            flex: 1;
            display: flex;
            align-items: center;
            margin-right: 32rpx;
            width: 0;

            text {
                // 超出隐藏
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin-left: 8rpx;
            }
        }

        .record-name-right {
            font-size: 24rpx;
            font-weight: 400;
            color: rgba(103, 117, 133, 1);

            .record-name-right-icon {
                display: inline-block;
                width: 16rpx;
                height: 16rpx;
                border-radius: 50%;
                background: rgba(103, 117, 133, 1);
                margin-right: 8rpx;
            }
        }
    }

    .record-describe {
        font-size: 32rpx;
        font-weight: 500;
        color: rgba(12, 16, 25, 1);
        margin-bottom: 10rpx;
    }

    .record-time {
        text {
            font-size: 28rpx;
            font-weight: 400;
            color: rgba(103, 117, 133, 1);
        }
    }
}
</style>